// baidu map js 文件加载
export default function baiduMap(ak) {
    return new Promise((resolve, reject) => {
        window.baiduMap = function() {
            resolve()
        }
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `//api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`  // 加载完后执行 callBack 方法：window.baiduMap
        script.onerror = reject
        document.head.appendChild(script)
    })
}

// 地图构造方法
export const MBMap = function (options) {
    this.$options = {
        el: 'baiduMap',
        point: { 
            lng: 120.169904,  // 默认杭州市中心坐标
            lat: 30.276903
        },
        zoomSize: 17,
        enableDragging: true,
        enableScrollWheelZoom: true,
        navigationControl: true,
        overviewMapControl: true,
        dragend: true,
        cb: null,
        ...options
    }
    this.$data = {
        title: '',
        content: '',
        point: { 
            lat: 0,
            lng: 0
        }
    }
    this.marker = null
    this.map = new BMap.Map(this.$options.el),      // 创建Map实例
    this.geoc = new BMap.Geocoder()
    
    // 开启地图拖拽
    if (this.$options.enableDragging) {
        this.map.enableDragging()                    
    }

    // 开启鼠标滚轮缩放功能, 仅对PC上有效
    if (this.$options.enableScrollWheelZoom) {
        this.map.enableScrollWheelZoom()                    
    }

    // 缩放控件
    if (this.$options.navigationControl) {
        this.map.addControl(new BMap.NavigationControl())                 
    }

    // 缩略地图控件
    if (this.$options.overviewMapControl) {
        this.map.addControl(new BMap.OverviewMapControl())              
    }

    // 地图添加点击事件
    this.map.addEventListener("click", (e) => {
        const point = new BMap.Point(e.point.lng, e.point.lat) // 创建新的标注坐标
        this.addMarker(point)
        this.callBack(e)
    })
}

MBMap.prototype = {
    setData(data) {
        this.$data = {
            ...this.$data,
            ...data
        }
    },
    // 添加窗口
    setInfoWindow() {
        const { title, content } = this.$data
        if (!title && !content) return
        const opts = {
            // width: 280,   // 宽度
            // height: 120,  // 高度
            title,           // 标题
            enableMessage: true, 
            enableCloseOnClick: false 
        }
        this.marker.openInfoWindow(new BMap.InfoWindow(content, opts))
    },
    // 添加marker
    addMarker(point, center = false) {
        // 移除之前的 marker 监听
        if (this.$options.dragend && this.marker) {
            this.marker.removeEventListener('dragend', this.callBack.bind(this), false)
            this.clearMarker()
        }
        this.marker = new BMap.Marker(point) // 创建标注
        this.map.addOverlay(this.marker)     // 将标注添加到地图中
        this.marker.enableDragging()         // 开启标注点拖拽
        this.setInfoWindow()                 // 添加窗口
        if (center) {
            // setTimeout(() => this.setCenterAndZoom(point), 300)
            this.setCenterAndZoom(point)
        }
        // this.callBack({ point })             // 返回坐标
        // this.marker.setAnimation(BMAP_ANIMATION_BOUNCE)
        
        // 标记点拖拽完成事件
        if (this.$options.dragend && this.marker) {
            this.marker.addEventListener('dragend', this.callBack.bind(this))
        }
    },
    // 清除marker
    clearMarker(center = false) {
        if (center) this.setCenterAndZoom()
        this.map.clearOverlays()
    },
    // 移动标注、点击地图 回调函数
    callBack(e) {
        const cb = this.$options.cb
        typeof cb === 'function' && cb({ lat: e.point.lat, lng: e.point.lng })
    },
    // 设置地图中心
    setCenterAndZoom(point) {
        if (!point) point = this.$options.point
        this.map.centerAndZoom(new BMap.Point(point.lng, point.lat), this.$options.zoomSize)
    },
    // 根据地址获取经纬度, 并添加标记点
    getPoint(obj) {
        const { title, address, content } = obj
        address && this.geoc.getPoint(address, (point) => {      
            if (point) {
                this.$data.title = title
                this.$data.content = content
                this.setCenterAndZoom(point)
                this.addMarker(point)
                this.callBack({ point })
            }      
        })
    },
    // 根据经纬度获取地址
    getAddress(point) {
        this.geoc.getLocation(new BMap.Point(point.lng, point.lat), function(result) {      
            if (result) {      
                // console.log(result.address)
            }      
        })
    }
}